<template>
  <div style="background: #f8f8f9">
    <Card title="选择串口" icon="md-link" :padding="0" shadow style="width: 100%;">
      <CheckboxGroup v-model="paths" slot="extra" @on-change="handleCheckGroup">
        <Checkbox
          v-for="item in getPaths"
          :label="item.path"
          :key="item.path"
          :disabled="item.open"
        ></Checkbox>
        <Button icon="md-refresh" @click="refPaths"></Button>
      </CheckboxGroup>
      <Scroll :height="getButtomHeight">
        <Card
          style="width:320px"
          v-for="port in ports"
          :key="port.path"
          :style="{display: 'inline-block'}"
        >
          <CellGroup>
            <Cell name="paths" :title="port.path" label="串口设备">
              <i-switch
                v-model="port.status"
                slot="extra"
                :loading="isLoading"
                @on-change="changeOpenStatus(port.status,port.path)"
              >
                <icon slot="open" type="md-checkmark">开启</icon>
                <icon slot="close" type="md-close">关闭</icon>
              </i-switch>
            </Cell>
            <Cell title="配置" label="串口配置">
              <Select
                v-model="port.options"
                slot="extra"
                style="width:200px"
                clearable
                transfer
                filterabl
                @on-change="handleSelectChange"
              >
                <Option
                  v-for="(item,index) in getHConfTbl"
                  :value="index"
                  :key="index"
                  :label="item.name"
                >
                  <span>{{ item.name }}</span>
                  <span
                    style="float:right;color:#ccc"
                  >{{ item.baudRate }},{{ item.dataBits }},{{ item.stopBits }},{{ item.parity }}</span>
                </Option>
              </Select>
            </Cell>
          </CellGroup>
        </Card>
      </Scroll>
    </Card>
  </div>
</template>
<script>
import ISEMPTY from "lodash/isEmpty";
import FINDINDEX from "lodash/findIndex";
import REMOVE from "lodash/remove";
import PICK from "lodash/pick";
export default {
  computed: {
    getButtomHeight: function () {
      return this.$store.getters.getBottomHeight - 36 - 51;
    },
    getHConfTbl() {
      return this.$store.getters.getHardConfTbl;
    },
    getPaths: function () {
      return this.$store.getters.getCurPorts;
    },
  },
  data() {
    return {
      uartCfg: "",
      paths: [],
      isLoading: false,
      switchValue: false,
      ports: [],
    };
  },
  mounted() {
    this.$store.dispatch("autoupCurPorts");
  },
  methods: {
    refPaths: function () {
      this.$store.dispatch("gotCurPorts");
    },
    changeOpenStatus: function (status, path) {
      console.log(status);
      console.log(path);
      console.log(this.ports);
      this.ports.forEach((port) => {
        if (port.path == path) {
          if (port.status && status) {
            let cfg = {};
            cfg = PICK(this.getHConfTbl[port.options], [
              "baudRate",
              "dataBits",
              "stopBits",
              "parity",
            ]);
            console.log(cfg);
            this.$store
              .dispatch("reqPortsOpen", {
                cfg: cfg,
                path: port.path,
              })
              .then((openPath) => {
                this.isLoading = false;
                this.$Message.success("打开" + openPath);
                this.$store.dispatch("reqPortReadMessage",openPath);
              })
              .catch((err) => {
                this.$Message.error("动作错误:" + port.path + err);
                this.isLoading = false;
                port.status = false;
              });
          } else if (!port.status && !status) {
            this.$store
              .dispatch("reqPortsClose", port.path)
              .then((closePath) => {
                this.$Message.success("关闭" + closePath);
              })
              .catch((err) => {
                this.$Message.error(err);
              });
          } else {
          }
        }
      });
    },
    handleCheckGroup: function (paths) {
      console.log(paths);
      paths.forEach((path) => {
        let index = FINDINDEX(this.ports, function (obj) {
          return obj.path == path;
        });
        if (index == -1) {
          let port = {
            path: path,
            options: 0,
            status: false,
          };
          this.ports.push(port);
        }
        return;
      });
      console.log(this.ports);
      REMOVE(this.ports, function (port) {
        let index = FINDINDEX(paths, function (path) {
          return port.path == path;
        });
        if (index == -1) {
          if (port.status == "open") {
            this.$Message.error("请先关闭" + port.path + "后,再试");
            this.paths.push(port.path);
            return false;
          } else {
            return true;
          }
        }
      });
    },
    handleSelectChange(option) {
      // this.ports.forEach(port=>{
      //   let open = JSON.parse(port.status.split("-")[0]);
      //   if(open){
      //     if(option==port.options){
      //        let cfg = {}
      //        cfg= PICK( this.getHConfTbl[port.options],["baudRate","dataBits","stopBits","parity"])
      //       console.log(cfg)
      //       this.$store.dispatch("upperPortSettings",{
      //         port:port.path,
      //         cfg:cfg
      //       }).then(()=>{
      //         this.$Message.success("更新成功!")
      //       }).catch((err)=>{
      //         this.$Message.error(err)
      //       })
      //     }
      //   }
      // })
    },
  },
};
</script>
<style >
</style>
